<template>
  <div id="apps"></div>
</template>
<script setup>
import echarts from "echarts";
import { onMounted } from "vue";
const props = defineProps({
  listData: {
    required: true,
    type: Array,
    default: [],
  },
});
const { listData } = toRefs(props);

onMounted(() => {
  watch(
    () => props.listData,
    () => {
      const dzaqxpgProjectNumArr = ref([])
      const qyxdzaqxpgProjectNumArr = ref([])
      const dzxqhProjectNumArr = ref([])
      const provinceArr = ref([])
      dzaqxpgProjectNumArr.value = listData.value.map(item=>{return item.dzaqxpgProjectNum})
      qyxdzaqxpgProjectNumArr.value = listData.value.map(item=>{return item.qyxdzaqxpgProjectNum})
      dzxqhProjectNumArr.value = listData.value.map(item=>{return item.dzxqhProjectNum})
      provinceArr.value = listData.value.map(item=>{return item.province})
      echarts.init(document.getElementById("apps")).dispose();    
      let myChart = echarts.init(document.getElementById("apps"));
      const option = 
        {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            top: 20,
            right: 6,
            icon: "square",
            itemHeight: 10, 
            itemWidth: 10,
            textStyle: {
              color: "#fff",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            // 自动滚动
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: provinceArr.value,
            textStyle: {
              color: "#FFFFFF",
            },
            // x轴样式
            axisLine: {
              lineStyle: {
                color: "#30374A",
                show: false,
              },
            },
            //x轴文字的配置
            axisLabel: {
              fontSize: 12,
              interval: 0, //设置间隔为0
              textStyle: {
                color: " #fff",
              },
            },
          },
          yAxis: {
            type: "value",
            textStyle: {
              color: "#FFFFFF",
            },
            // y轴样式
            axisLine: {
              show: false,
              lineStyle: {
                color: "transparent",
              },
            },
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            // 背景线条
            splitLine: {
              lineStyle: {
                color: "rgba(71,90,219,0.5)",
                type: "dashed",
              },
            },
          },
          dataZoom: [//滑动条
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 4, // 一次性展示几个。
            }
          ],
          series: [
            {
              name: "地震安全性评价",
              type: "line",
              // stack: "Total",
              itemStyle: {
                normal: {
                  color: "#46FFFF",
                },
              },
              data: dzaqxpgProjectNumArr.value,
            },
            {
              name: "区域性地震安全性评价",
              type: "line",
              // stack: "Total",
              itemStyle: {
                normal: {
                  color: "#FFB35B",
                },
              },
              data: qyxdzaqxpgProjectNumArr.value,
            },
            {
              name: "地震小区划",
              type: "line",
              // stack: "Total",
              itemStyle: {
                normal: {
                  color: "#ED5385",
                },
              },
              data: dzxqhProjectNumArr.value,
            },
          ],
        };
      var timer = null;
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
      // 每次向后滚动一个，最后一个从头开始；
      // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
      if (option.dataZoom[0].endValue == props.listData.length - 1) {
        option.dataZoom[0].endValue = 4;
        option.dataZoom[0].startValue = 0;
      }
      else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option,true); // 这条不能省略；

}, 2000);
myChart.setOption(option,true);
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },{ deep: true, immediate: true }
  );
});
</script>
<style lang="scss" scoped>
#apps {
  width: 420px;
  height: 220px;
  margin: 0px 0 0 0;
  color: #fff;
}
</style>
